<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>系统更新</title>
  <link href="/assets/stylesheets/animate.min.css" rel="stylesheet">
  <link href="/assets/stylesheets/bootstrap.min.css" rel="stylesheet">
  <!-- <link href="/mix/bootstrap-theme.min.css" rel="stylesheet"> -->
  <link href="/assets/stylesheets/style.min.css" rel="stylesheet">
</head>
<body>

<header class="header bg-white b-b b-light">
    <p>您的版本为：{$info['rank']}，您的当前版本号为V{$ver} &emsp;（新版升级入口已调整，详询客服）</p>

</header>
<div style="padding:15px">
    <table class="table table-bordered table-striped" style="width:70%;float:left;">
      <colgroup>
        <col class="col-xs-1">
        <col class="col-xs-7">
      </colgroup>
      <thead>
        <tr>
          <th>版本号</th>
          <th>更新简介</th>
        </tr>
      </thead>
      <tbody>
        {loop $chanageinfo as $change}
        <tr>
          <td>{$change['name']}</td>
          <td>{$change['content']}</td>
        </tr>
        {/loop}
        {if count($chanageinfo)==0}
        <tr>
          <td colspan="4" style="text-align: center">您已经更新到了最新版本</td>
        </tr>
        {/if}
        <tr>
          <td colspan="2">
            <ul class="list-group" style="margin-top:20px">
              <li class="list-group-item">
                <label>
                  <input type="checkbox" class="agree">
                  <span>我尊重企微魔盒官方的辛苦劳动成果</span>
                </label>
              </li>
              
              <li class="list-group-item">
                <label>
                  <input type="checkbox" class="agree">
                  <span>我已经做好备份并自愿承担一切因不备份造成的后果</span>
                </label>
              </li>
              <li class="list-group-item" style="text-align:center;">
                <a href="javascript:void(0)" class="btn btn-success" id="btn-update" disabled="disabled">立即更新</a>
                <a href="javascript:void(0)" class="btn btn-danger" style="margin-left:30px" onclick="window.history.back()">返回</a>
              </li>
            </ul>
          </td>
        </tr>
        <tr id="process-box" style="display: none">
          <td colspan="2">
            <div class="progress progress-striped active">
              <div class="progress-bar progress-bar-success" role="progressbar"
                   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                   style="width: 5%;" id="process-bar">
                <span id="process-msg1">0%</span>&emsp;
                <span id="process-msg2"></span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
 </table>
    <div class="panel panel-default" style="width:28%;float:right;">
      <div class="panel-heading">
        <h3 class="panel-title">版本显示</h3>
      </div>
      <div class="panel-body">
        当前版本号：{$info['rank']}v{$ver}<br>
        最新版本号：{$lastver}
      </div>
    </div>
</div>
</body>
</html>
<script src="/mix/jquery.min.js"></script>
<script src="/mix/bootstrap.min.js"></script>
<script>
  var agreeFlag = false;
  $('.agree').on('change', function () {
    var flag = true;
    var allCheckbox = document.getElementsByClassName('agree');
    for (var i = 0; i < allCheckbox.length; i++) {
      if (!allCheckbox[i].checked) {
        flag = false;
        break;
      }
    }
    agreeFlag = flag;
    if (!agreeFlag) {
      document.getElementById('btn-update').setAttribute('disabled', 'disabled');
    } else {
      document.getElementById('btn-update').removeAttribute('disabled');
    }
  });
  $('#btn-update').on('click', function () {
    updateNow();
  });

  function updateNow() {
    if (!agreeFlag) {
      this.alert('请确认并勾选上述协议');
      return false;
    }
    var ver = "{$ver}";
    var lastVer = "{$lastver}";
    var pkgNum = lastVer * 10 - ver * 10;
    if (pkgNum <= 0) {
      return false;
    }
    console.log('更新包数目', pkgNum);
    // 显示进度条
    $('#process-box').show();
    //发起更新
    ajaxUpdate(pkgNum, pkgNum);
    // 更新完毕，提示/刷新

  }

  function ajaxUpdate(num, all) {
    $.ajax({
      url: 'updatenow.html',
      method: 'get',
      data: {},
      beforeSend: function () {
      },
      complete: function () {
      },
      success: function (resp) {
        console.log(resp);
        if (resp.status == 'success') {
          //本次请求更新成功了
          updateProcess(computeProcess(all - num + 1, all), resp.msg);
          //下次更新
          nextNum = num - 1;
          if (nextNum > 0) {
            ajaxUpdate(nextNum, all);
          }else{
            location.reload(1)
          }
        } else {
          alert(resp.msg);
          updateProcess(computeProcess(all - num, all), resp.msg);
        }
      },
      error: function () {
      }
    });
  }

  function computeProcess(curr, all) {
    if (curr == all) {
      return 100;
    } else {
      return parseInt(curr / all * 100);
    }
  }

  function updateProcess(num, msg) {
    var ele_bar = document.getElementById('process-bar');
    var ele_msg1 = document.getElementById('process-msg1');
    var ele_msg2 = document.getElementById('process-msg2');
    if (num < 0) {
      num = 0
    }
    ele_bar.style.width = num + '%';
    ele_msg1.innerText = num + '%';
    ele_msg2.innerText = msg;
  }
</script>